@import "../sass/公共类.scss";

.content {
    .header {
        // background: chocolate;
        width: footerVw(750);
        margin: 0 0;
        padding: footerVw(30) footerVw(20);
        @include flex();
        align-items: center;
        .h-left {
            img {
                width: footerVw(123);
            }
        }
        .h-center {
            .search {
                height: footerVw(60); 
                width: footerVw(270);
                border: footerVw(4) solid $orangeColor;   
                border-radius: footerVw(50); 
                display: flex;
                justify-content: space-around;
                position: relative;
                input {
                    font-size: footerVw(25);
                    width: footerVw(225);
                    background: none;
                    border: none;         
                }
                img:first-of-type {
                    width: footerVw(29);
                    height: footerVw(30);
                    position: absolute;
                    right: footerVw(30);
                    top: footerVw(10);
                }
                img:last-of-type {
                    width: footerVw(15);
                    height: footerVw(14);
                    position: absolute;
                    right: footerVw(20);
                    top: footerVw(30);
                }
            }

        }
        .h-right {
            select {
                height: footerVw(65);
                width: footerVw(150);
                border: footerVw(4) solid $orangeColor;
                font-size: footerVw(25);
                padding: 0 footerVw(10);
                appearance: none;
                background: url("../img/公共img/城市切换下拉.png") no-repeat right center;
                background-size: footerVw(40) footerVw(20);
            }
        }
    }
    .subject {
        padding-top: footerVw(190);
        .Carousel {
            img {
                height: footerVw(287); 
            }
        }
        .GroupBuying {
            width: footerVw(710);
            margin: footerVw(40) footerVw(20);
            .g-top {
                @include flex();
                // background: cadetblue;
                .left {
                    width: footerVw(225);
                    @include flex();
                    line-height: footerVw(70);
                    img {
                        width: footerVw(70);
                        height: footerVw(70);
                    }
                    h3 {
                        font-weight: 550;
                        font-size: footerVw(36);
                    }
                }
                .right {
                    width: footerVw(100);
                    @include flex();
                    line-height: footerVw(70);
                    a {
                        color: black;
                        font-size: footerVw(28);
                    }
                    img{
                        width: footerVw(30);
                        height: footerVw(30);
                        margin: auto 0;
                    }
                }
            }
            .g-bottom {
                margin: footerVw(30) 0;
                div {
                    width: footerVw(710);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    // background: coral;
                    img {
                        width: footerVw(275);
                        margin-bottom: footerVw(20);
                    }
                }
            }
        }
        .GuessYouLike {
            width: footerVw(710);
            margin: 0 footerVw(20);
            .y-top {
                margin-bottom: footerVw(15);
                @include flex();
                .left {
                    width: footerVw(225);
                    @include flex();
                    line-height: footerVw(70);
                    img {
                        width: footerVw(70);
                        height: footerVw(70);
                    }
                    h3 {
                        font-weight: 550;
                        font-size: footerVw(36);
                    }
                }
                .right {
                    width: footerVw(100);
                    @include flex();
                    line-height: footerVw(70);
                    a {
                        color: black;
                        font-size: footerVw(28);
                    }
                    img{
                        width: footerVw(30);
                        height: footerVw(30);
                        margin: auto 0;
                    }
                }
            }
            .y-bottom {
                margin: footerVw(30) 0;
                ul {
                    li {
                        @include flex();
                        margin-bottom: footerVw(28);
                        img {
                            width: footerVw(225);
                            height: footerVw(180);
                        }
                        div:first-of-type {
                            width: footerVw(320);
                            margin: auto 0;
                            h2, h3 ,h4 {
                                height: footerVw(50);
                                line-height: footerVw(50);
                            }
                            h3 {
                                font-size: footerVw(30);
                                font-weight: 500;   
                            }
                            h4 {
                                font-size: footerVw(18);
                                font-weight: 400;
                                color:rgb(116, 112, 112);
                            }
                            h2 {
                                font-size: footerVw(30);
                                color: $orangeColor;
                            }
                        }
                        div:last-of-type {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            span {
                                display: inline-block;
                                font-size: footerVw(20);
                                text-align: right;
                                color: rgb(116, 112, 112);
                            }
                        }
                        // div:last-of-type span:first-of-type {
                        //     line-height: footerVw(50);
                        // }
                        // div:last-of-type span:last-of-type {
                        //     line-height: footerVw(100);
                        // }
                    }
                }
            }
        }
    }

}